<!--
 * @Author: guo wei
 * @LastEditors: [guo wei]
 * @LastEditTime: 2024-01-04 19:41:47
 * @Description: 
-->
<template>
  <div class="form-wrap">
    <el-button type="primary" @click="addType">添加分类</el-button>
    <el-form
      ref="form"
      class="border-form"
      :model="form"
      size="large"
      label-position="left"
      label-width="240px"
      :hide-required-asterisk="true"
      @submit.native.prevent
    >
      <el-form-item
        :label="item.buildingTypeName"
        v-for="(item, index) in buildingTagsData"
        :key="index"
      >
        <FormTag
          :buildingTypeInfoId="item.buildingTypeInfoId"
          @closeTagItem="closeTagItem"
          @addNewTagItem="addNewTagItem"
          @editTagItem="editTagItem"
          :data="item.usedPartInfoVOS"
        ></FormTag>
      </el-form-item>
    </el-form>
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="dialogVisible"
      title="添加分类"
      width="30%"
    >
      <div>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmCreateType">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import {
  usedPartInfos,
  usedPartInfo,
  addUsedPartInfo,
  modifyUsedPartInfo,
} from "@/api/building-type";
import FormTag from "@/components/EditTag/form-tag.vue";
const form = reactive({});
const dialogVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "",
});
const rules = reactive({
  name: [
    { required: true, message: "请输入分类名称", trigger: "blur" },
    { min: 2, max: 10, message: "字符长度在2-10个字符", trigger: "blur" },
  ],
});
const closeTagItem = async (item) => {
  const params = {
    recordVersion: item.recordVersion,
    usedPartInfoId: item.usedPartInfoId,
  };
  try {
    const res = await usedPartInfo(params);
    if (res.code == 200) {
      getListData();
    }
  } catch (error) {}
};
const editTagItem = async (item) => {
  console.log("addNewTagItem", item);
  const params = {
    buildingTypeInfoId: item.buildingTypeInfoId,
    usedPartName: item.editValue,
    recordVersion: item.recordVersion,
    usedPartInfoId: item.usedPartInfoId,
  };
  try {
    const res = await modifyUsedPartInfo(params);
    if (res.code == 200) {
      // setTimeout(() => {
      //   getListData();
      // }, 1000);
      getListData();
    }
  } catch (error) {}
};
const addNewTagItem = async (item) => {
  const params = {
    buildingTypeInfoId: item.buildingTypeInfoId,
    usedPartName: item.name,
  };
  try {
    const res = await addUsedPartInfo(params);
    if (res.code == 200) {
      getListData();
    }
  } catch (error) {}
};
const addType = () => {
  dialogVisible.value = true;
};
const buildingTagsData = ref([]);
const getListData = async () => {
  const params = { count: true, pageId: 1, pageSize: 20 };
  try {
    const res = await usedPartInfos(params);
    if (res.code == 200) {
      buildingTagsData.value =
        res.result.map((x) => {
          if (x.usedPartInfoVOS) {
            return {
              ...x,
              usedPartInfoVOS: x.usedPartInfoVOS.map((i) => {
                return {
                  ...i,
                  name: i.usedPartName,
                  isEdit: false,
                  editValue: i.usedPartName,
                };
              }),
            };
          }
          return {
            ...x,
          };
        }) || [];
    }
  } catch (error) {}
};
getListData();
const confirmCreateType = async () => {
  if (!ruleFormRef.value) return;
  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      dialogVisible.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style lang="scss" scoped>
.border-form {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-top: 20px;
  :deep .el-form-item {
    border-bottom: 1px solid #e4e7ed;
    margin-bottom: 0px;
    &:last-child {
      border-bottom: none;
    }
    .el-form-item__label {
      border-right: 1px solid #e4e7ed;
      padding: 20px;
      display: flex;
      height: auto;
      align-items: center;
    }
    .el-form-item__content {
      padding: 20px;
      padding-bottom: 5px;
      > * {
        padding: 0 20px;
      }
      .el-form-item__error {
        top: 42px;
      }
      .el-tag {
        margin-left: 15px;
        margin-bottom: 15px;
        vertical-align: middle;
      }
      .button-new-tag {
        margin-left: 15px;
        margin-bottom: 15px;
      }
      .el-input {
        width: auto;
        display: inline-block;
        margin-left: 15px;
        margin-bottom: 15px;
      }
    }
    .el-input__inner {
      margin-bottom: 0px;
    }
  }
}
.form-wrap {
  padding: 20px;
}
</style>
